<template>
	<view>
		<u-navbar back-text="返回" title="在线支付" :border-bottom="false" :back-text-style="{color: 'rgba(16,142,233,1)' }"
		 back-icon-color="#108EE9">
		</u-navbar>
		<!-- 顶部 -->
		<view class="top-box">
			<view class="left">
				<view class="money">
					￥4000元
				</view>
				<view class="pay-text">
					支付金额
				</view>
			</view>
			<view class="right">
				<image src="../../../static/images/job/paymethods.png" mode=""></image>
			</view>
		</view>
		<!-- 顶部 -->
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="order-item">
				订单编码:<text>2165486486464646</text>
			</view>
			<view class="order-item">
				订单时间:<text>2020.02.02</text>
			</view>
		</view>
		<!-- 订单信息 -->
		<!-- 支付方式选择 -->
		<view class="pay-box">
			<view class="pay-inlin-box">
				<view class="methods-item">
					<view class="left">
						<view class="left-icon">
							<image src="../../../static/images/job/balance.png" mode=""></image>
						</view>
						<view class="right-text">
							<view class="title">
								可抵扣3000元
							</view>
							<view class="balance">
								余额：3000元
							</view>
						</view>
					</view>
					<view class="right">
						<u-switch v-model="form.paymethods" active-color="#D3B069" inactive-color="#eee"></u-switch>
					</view>
				</view>
				<view class="methods-item alipay-item">
					<view class="left">
						<view class="left-icon">
							<image src="../../../static/images/job/alipay.png" mode=""></image>
						</view>
						<view class="right-text">
							支付宝
						</view>
					</view>
					<view class="right">
						<image src="../../../static/images/job/isactive.png" mode=""></image>
					</view>
				</view>
				<view class="methods-item wechart-item">
					<view class="left">
						<view class="left-icon">
							<image src="../../../static/images/job/weichart.png" mode=""></image>
						</view>
						<view class="right-text">
							微信
						</view>
					</view>
					<view class="right">
						<image src="../../../static/images/job/isactive.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="pay-btn">
				立即支付
			</view>
		</view>
		<!-- 支付方式选择 -->
	</view>
</template>

<script>
	export default{
		data(){
			return{
				form:{
					paymethods:false
				}
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>
	.top-box{
		width: 100%;
		height:200rpx;
		padding: 44rpx 136rpx 55rpx 110rpx;
		box-sizing: border-box;
		background:linear-gradient(180deg,rgba(211,176,105,1) 0%,rgba(228,205,112,1) 100%);
		opacity:1;
		display: flex;
		justify-content: space-between;
		.left{
			margin-top: 12rpx;
			.money{
				font-size:36rpx;
				font-weight:400;
				line-height:48rpx;
				color:rgba(255,255,255,1);
				opacity:1;
			}
			.pay-text{
				margin-top: 10rpx;
				font-size:22rpx;
				font-weight:400;
				line-height:30rpx;
				color:rgba(255,255,255,1);
				opacity:1;
				text-align: right;
			}
			
		}
		.right{
			width: 105rpx;
			height: 104rpx;
			image{
				width: 105rpx;
				height: 104rpx;
			}
		}
	}
	.order-info{
		padding: 17rpx 0rpx 40rpx 70rpx;
		width: 100%;
		box-sizing: border-box;
		border-bottom: 10rpx solid rgba(245,245,245,1);
		.order-item{
			margin-top: 25rpx;
			font-size:26rpx;
			font-weight:400;
			line-height:35rpx;
			color:rgba(153,153,153,1);
			opacity:1;
			text{
				display: inline-block;
				margin-left: 10rpx;
				font-size:28rpx;
				font-weight:400;
				line-height:35px;
				color:rgba(51,51,51,1);
				opacity:1;
			}
		}
	}
	.pay-box{
		padding: 72rpx 30rpx 70rpx;
		width: 100%;
		box-sizing: border-box;
		.pay-inlin-box{
			padding: 0 40rpx;
			width: 100%;
			box-sizing: border-box;
			.methods-item{
				display: flex;
				justify-content: space-between;
				.left{
					flex: 1;
					display: flex;
					.left-icon{
						margin-top: 9rpx;
						width: 60rpx;
						height: 60rpx;
						image{
							width: 60rpx;
							height: 60rpx;
						}
					}
					.right-text{
						margin-left: 30rpx;
						.title{
							font-size:26rpx;
							font-weight:400;
							line-height:35rpx;
							color:rgba(51,51,51,1);
							opacity:1;
						}
						.balance{
							margin-top: 12rpx;
							font-size:24rpx;
							font-weight:400;
							line-height:32rpx;
							color:rgba(153,153,153,1);
							opacity:1;
						}
					}
				}
				.right{
					margin-top: 14rpx;
				}
			}
			.alipay-item{
				margin-top: 139rpx;
				.left{
					.right-text{
						font-size:26rpx;
						font-weight:600;
						line-height:70rpx;
						color:rgba(51,51,51,1);
						opacity:1;
					}
				}
				.right{
					margin-top: 8rpx;
					width: 44rpx;
					height: 44rpx;
					image{
						width: 44rpx;
						height: 44rpx;
					}
				}
			}
			.wechart-item{
				margin-top: 82rpx;
				.left{
					width: 60rpx;
					height: 52rpx;
					.left-icon{
						width: 60rpx;
						height: 52rpx;
						image{
							width: 60rpx;
							height: 52rpx;
						}
					}
					.right-text{
						font-size:26rpx;
						font-weight:600;
						line-height:70rpx;
						color:rgba(51,51,51,1);
						opacity:1;
					}
				}
				.right{
					margin-top: 8rpx;
					width: 44rpx;
					height: 44rpx;
					image{
						width: 44rpx;
						height: 44rpx;
					}
				}
			}
		}
		.pay-btn{
			margin-top: 193rpx;
			width: 100%;
			height:90rpx;
			background:linear-gradient(180deg,rgba(211,176,105,1) 0%,rgba(228,205,112,1) 100%);
			border-radius:8rpx;
			text-align: center;
			line-height: 90rpx;
			font-size:30rpx;
			font-weight:600;
			color:rgba(255,255,255,1);
			opacity:1;
		}
	}
</style>
